<template>
	<view class="wrap">
		<view class="wrap__header">
			<uni-icons type="left" size="24" color="#fff" @click="backClick"></uni-icons>
			<text class="header__title">{{$t('exchange.title')}}</text>
			<image src="@/static/icons/history.png" mode="widthFix" class="header__icon" @click="recordClick"></image>
		</view>
		<view class="wrap__banner">
			<view class="banner__info">
				<view class="info__item">
					<view class="item__title">USD</view>
					<view class="item__num">{{accountInfo.usd_money || 0}}</view>
				</view>
				<view class="info__item">
					<view class="item__title">JPY</view>
					<view class="item__num">{{accountInfo.krn_money|| 0}}</view>
				</view>
			</view>
			<view class="banner__footer">
				<view class="footer__title">GBP</view>
				<view class="footer__num">{{accountInfo.hkd_money || 0}}</view>
			</view>
		</view>
		<view class="wrap__option">
			<view class="option__title">{{$t('exchange.account')}}</view>
			<view class="option__item">
				<view class="item__title">{{$t('exchange.from')}}</view>
				<picker mode="selector" :range="typeList" @change="fromChange" range-key="title">
					<view class="item__main">
						<input type="text" v-model="fromInfo.title" class="main__value" disabled
							:placeholder="$t('exchange.placeholder')" />
						<uni-icons type="right" color="#fff" size="20"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="option__item">
				<view class="item__title">{{$t('exchange.to')}}</view>
				<picker mode="selector" :range="typeList" @change="toChange" range-key="title">
					<view class="item__main">
						<input type="text" v-model="toInfo.title" class="main__value" disabled
							:placeholder="$t('exchange.placeholder')" />
						<uni-icons type="right" color="#fff" size="20"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="option__item">
				<view class="item__title">{{$t('exchange.rate')}}</view>
				<view class="item__right">{{rateNum}}</view>
			</view>
			<view class="option__item">
				<view class="item__title">{{$t('exchange.money')}}</view>
				<view class="item__input" @click="showkeyWord">
					<input type="number" v-model.trim="inputNum" :placeholder="$t('exchange.write')" class="input__val" maxlength="10" />
					<u-keyboard ref="uKeyboard" :confirmText="this.$t('trade.sure')" :cancelText="this.$t('trade.cancel1')" mode="number" @cancel="cancel"
							@confirm="confirm" :show="show" @change="change" @backspace="backspace">
					<view class="keyWord" style="">{{ inputNum }}</view>
				</u-keyboard>
				</view>
			</view>
		</view>
		<view class="wrap__btn">
			<text class="btn__text" @click="enterClick">{{$t('exchange.enter')}}</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				typeList: [{
						title: "USD",
						id: "2"
					},
					{
						title: "JPY",
						id: "1"
					},
					{
						title: "GBP",
						id: "3"
					},
				],
				fromInfo: {},
				toInfo: {},
				inputNum: "",
				rateNum: "", //汇率
				show:false,
				input:'',
				accountInfo:[]
			}
		},
		computed: {
			...mapState("user", ["userInfo"]),
			// accountInfo() { //賬戶信息
			// 	return this.userInfo.user_info
			// }
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			async getUserInfo() {
				let res = await this.$api.getUserInfo()
				if (res && res.code === 1 && res.data) {
					this.accountInfo = res.data.user_info
				}
			},
			change(e){
				this.inputNum += e
				/* this.inputNum */
			},
			backspace() {
							this.inputNum = this.inputNum.slice(0, -1)
						},
			showkeyWord(){
				uni.hideKeyboard();
				this.show = true
			},
			cancel(){
				this.show = false
			},
			confirm(){
				this.show = false
			},
			// 获取汇率
			async getExchangeRate() {
				let {
					fromInfo,
					toInfo
				} = this
				let res = await this.$api.getExchangeRate(fromInfo.id, toInfo.id)
				if (res.code === 1 && res.data) {
					if (res.data.data) {
						this.rateNum = res.data.data
					}
				}
			},
			// 从选择
			fromChange(e) {
				let {
					value
				} = e.detail
				let {
					fromInfo,
					toInfo
				} = this
				let info = this.typeList[value]
				if (info.id !== fromInfo.id && info.id !== toInfo.id) {
					this.fromInfo = info
					if (info.id && toInfo.id) {
						this.getExchangeRate()
					}
				} else {
					uni.showToast({
						title: this.$t("exchange.pickerTips"),
						icon: "none"
					})
				}
			},
			// 到选择
			toChange(e) {
				let {
					fromInfo,
					toInfo
				} = this
				let {
					value
				} = e.detail
				let info = this.typeList[value]
				if (info.id !== toInfo.id && info.id !== fromInfo.id) {
					this.toInfo = info
					if (fromInfo.id && info.id) {
						this.getExchangeRate()
					}
				} else {
					uni.showToast({
						title: this.$t("exchange.pickerTips"),
						icon: "none"
					})
				}
			},
			recordClick() {
				uni.navigateTo({
					url: "/pages/trade/exchangeHistory"
				})
			},
			// 兌換點擊
			async enterClick() {
				let {
					fromInfo,
					toInfo,
					inputNum
				} = this
				if (!fromInfo.id || !toInfo.id) {
					uni.showToast({
						title: this.$t("exchange.accountTips"),
						icon: "none"
					})
					return
				}
				if (!inputNum || !Number(inputNum) || Number(inputNum) <= 0) {
					uni.showToast({
						title: this.$t("exchange.moneyTips"),
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: this.$t('loading.loading'),
					mask: true
				})
				let params = {
					from: fromInfo.id,
					to: toInfo.id,
					amount: inputNum
				}
				let res = await this.$api.exChangeHandle(params)
				uni.hideLoading()
				if (res && res.code === 1) {
					uni.showToast({
						title: this.$t('success.success'),
						icon: "success",
						mask: true
					})
					// 更新用户数据
					this.$store.dispatch("user/getUserInfo")
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/trade/trade'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
			},
			backClick() {
				uni.switchTab({
					url:"/pages/trade/trade"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 0 30rpx;
		box-sizing: border-box;

		&__header {
			height: 128rpx;
			@include flexRowAlign(space-between);

			.header__title {
				flex: 1;
				font-size: 46rpx;
				font-weight: 800;
				color: #fff;
				text-align: center;
			}

			.header__icon {
				width: 42rpx;
				height: 42rpx;
			}
		}

		&__banner {
			width: 690rpx;
			height: 280rpx;
			background: url('@/static/imgs/trade_banner.png') no-repeat center center;
			background-size: 100% 100%;
			margin-top: 10rpx;
			padding: 30rpx 50rpx;
			box-sizing: border-box;

			.banner__info {
				@include flexRowAlign(space-between);

				.info__item {
					width: 280rpx;
					height: 98rpx;

					.item__title {
						font-size: 26rpx;
						color: #FFFFFF;
					}

					.item__num {
						font-size: 36rpx;
						font-weight: 800;
						color: #FFFFFF;
						margin-top: 6rpx;
					}
				}
			}

			.banner__footer {
				width: 280rpx;
				height: 98rpx;
				margin-top: 24rpx;

				.footer__title {
					font-size: 26rpx;
					color: #FFFFFF;
				}

				.footer__num {
					font-size: 36rpx;
					font-weight: 800;
					color: #FFFFFF;
					margin-top: 6rpx;
				}
			}
		}

		&__option {
			margin-top: 50rpx;

			.option__title {
				font-size: 36rpx;
				font-weight: 800;
				color: #fff;
				margin-bottom: 40rpx;
			}

			.option__item {
				padding: 0 30rpx;
				box-sizing: border-box;
				// border-top: 1px solid #EEEEEE;
				@include flexRowAlign();
				height: 98rpx;

				&:last-child {
					// border-bottom: 1px solid #EEEEEE;
				}

				.item__title {
					font-size: 32rpx;
					color: #fff;
				}

				.item__main {
					/* width: 610rpx; */
					margin-left: 60rpx;
					width: 500rpx;
					@include flexRowAlign(flex-end);

					.main__value {
						font-size: 32rpx;
						font-weight: 500;
						color: #fff;
						text-align: right;
					}

					.main__icon {
						width: 30rpx;
						height: 30rpx;
						margin-left: 20rpx;
					}
				}

				.item__right {
					margin-left: 100rpx;
					color: #fff;
					font-size: 32rpx;
				}

				.item__input {
					margin-left: 50rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #fff;
				}
				.keyWord{
					width: 100%;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					background-color: white;
					color: black;
				}
				.item__btn {
					margin-top: 40rpx;
					padding-bottom: 60rpx;
					@include flexRowAlign(center);

					.btn__text {
						@include flexCenter();
						width: 600rpx;
						height: 98rpx;
						background: #458EF4;
						border-radius: 12rpx;
						font-size: 36rpx;
						font-weight: 800;
						color: #161827;
					}
				}
			}
		}

		&__btn {
			margin-top: 180rpx;
			@include flexRowAlign(center);

			.btn__text {
				@include flexCenter();
				width: 600rpx;
				height: 98rpx;
				background: #458EF4;
				border-radius: 12rpx;
				font-size: 36rpx;
				font-weight: 800;
				color: #FFFFFF;
			}
		}
	}
</style>